<template>
  <BasicModal @register="registerModal" v-bind="$attrs" title="选择部件类型" :footer="null">
    <div class="flex w-full flex-wrap auto-rows-auto">
      <div class="cursor-pointer rounded mb-3 mr-3 common" @click="goEditWidgets(widgetsFqn.CHART)">
        <img :src="widgetOne" alt="" class="w-full inline-block" />
        <div class="pt-3 pl-3 pb-3 bg-white">图表部件</div>
      </div>
      <div class="cursor-pointer rounded mb-3 mr-3 common" @click="goEditWidgets(widgetsFqn.CARD)">
        <img :src="widgetTwo" alt="" class="w-full inline-block" />
        <div class="pt-3 pl-3 pb-3 bg-white"> 最新值</div>
      </div>
      <div class="cursor-pointer rounded mb-3 mr-3 common" @click="goEditWidgets(widgetsFqn.TABLE)">
        <img :src="widgetThree" alt="" class="w-full inline-block" />
        <div class="pt-3 pl-3 pb-3 bg-white">告警部件</div>
      </div>
      <div
        class="cursor-pointer rounded mb-3 mr-3 common"
        @click="goEditWidgets(widgetsFqn.CONTROL)"
      >
        <img :src="widgetFour" alt="" class="w-full inline-block" />
        <div class="pt-3 pl-3 pb-3 bg-white">控件部件</div>
      </div>
      <div class="cursor-pointer rounded mb-3 mr-3 common" @click="goEditWidgets(widgetsFqn.HTML)">
        <img :src="widgetFive" alt="" class="w-full inline-block" />
        <div class="pt-3 pl-3 pb-3 bg-white">静态部件</div>
      </div>
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { widgetsFqn } from '/@/enums/widgetsEnum';
  import { useGo } from '/@/hooks/web/usePage';
  import widgetOne from '/@/assets/images/widget-one.png';
  import widgetTwo from '/@/assets/images/widget-two.png';
  import widgetThree from '/@/assets/images/widget-three.png';
  import widgetFour from '/@/assets/images/widget-four.png';
  import widgetFive from '/@/assets/images/widget-five.png';
  const go = useGo();
  const [registerModal] = useModalInner();
  const goEditWidgets = (type: string) => {
    go(`/tb-resources/widgets-coding?key=add&type=${type}`);
  };
</script>
<style lang="scss" scoped>
  .common {
    width: calc(33.3% - 12px);
    color: rgba(0, 0, 0, 0.85);
    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
  }
</style>
